.qrcode-filter {
  background: #fff;

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx;
    border-bottom: 1px solid #f5f5f5;
  }

  &__title {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }

  &__filter {
    display: flex;
    align-items: center;
    // cursor: pointer;
  }

  &__icon {
    width: 40rpx;
    height: 40rpx;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z' fill='%23666'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform 0.3s;

    &.expanded {
      transform: rotate(180deg);
    }
  }

  &__text {
    font-size: 28rpx;
    color: #666;
    margin-left: 8rpx;
  }

  &__content {
    padding: 24rpx;
    display: flex;
    flex-wrap: wrap;
    margin: -10rpx;
    animation: slideDown 0.3s ease-out;
  }

  &__item {
    margin: 10rpx;
    padding: 0 24rpx;
    height: 64rpx;
    line-height: 64rpx;
    font-size: 28rpx;
    color: #666;
    background: #f5f5f5;
    border-radius: 32rpx;
    transition: all 0.3s;

    &.active {
      color: #fff;
      background: #4575C9;
    }

    &:active {
      opacity: 0.8;
    }
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
